<template>
  <div class="shop">
    <el-table :data="tableData"
      style="width:100%;margin:20px 0;"
      max-height="680"

      :header-cell-style="tccolor"
      border>

    <el-table-column label="市"  width="120">
      <template slot-scope="scope">
        <p style="text-align:center">{{scope.row.name}}</p>
      </template>
    </el-table-column>
    <el-table-column label="区/县">
      <template slot-scope="scope">
         <div v-for='(item,index) in scope.row.children_list' :key="'p'+index" style='float:left;margin-right:12px;margin-bottom:12px;'>

           <el-button size="mini" type="primary" @click="goToAreaSettingDetail(scope.row.children_list[index].id,scope.row.id)" v-if="scope.row.children_list[index].is_served == 1">{{scope.row.children_list[index].name}}</el-button>
        <el-button size="mini" type="danager" @click="goToAreaSettingDetail(scope.row.children_list[index].id,scope.row.id)" v-if="scope.row.children_list[index].is_served == 0">{{scope.row.children_list[index].name}}</el-button>
         </div>

      </template>
    </el-table-column>
    </el-table>
  </div>
</template>


<script>
// import {providerRegionAreaList} from '@/api/service'
export default {
  data(){
    return{
       province_id:'',
       tableData:[],
    }
  },
  mounted(){
    this.province_id = this.$route.query.province_id
    if(this.province_id){
      this.getproviderRegionAreaListData()
    }
  },
  methods:{


   goToAreaSettingDetail(id,city_id){
      this.$router.push({
        path:'./ispAreaDetail',
        query:{
          area_id:id,
          province_id:this.province_id,
          city_id:city_id
        }
      })
    },

   async getproviderRegionAreaListData(){
     var url = 'province_id='+this.province_id
     let res = await providerRegionAreaList(url)
     if(res.code === 10000){
       this.tableData =  res.data
     }else{
       this.$message.error(res.message)
     }
   },

   tc () {
      return "text-align:center; color:#333333; font-size:12px;";
    },
    tccolor () {
      return "text-align:center; font-size:14px;";
    },
  }
}
</script>


<style lang="scss" scoped>
.shop{
  padding: 20px;
}
</style>
